<template>
    <a-tabs v-model:activeKey="activeKey" class="tab-page-container" id="innov-editor">
        <template #leftExtra>
            <div class="page-title-area">
                {{ props.title }}
            </div>
        </template>
        <a-tab-pane key="introduce" tab="填写说明" class="page-pane nopadding" v-if="data.basicInfo.isNew">
            <div class="paper-container app-intro">
                <div class="page-div">
                    <div class="fill-introduce-title">
                        填写说明
                    </div>
                    <p class="fill-introduce">
                        1、本申请书所列各项内容均须实事求是，认真填写，表达明确严谨，简明扼要，申报书请按顺序逐项填写，填写内容必须实事求是，<strong>空缺项要填“无”</strong>。
                    </p>
                    <p class="fill-introduce">
                        2、申请人可以是个人，也可为创新团队，可以在<a href="javascript: void(0)" @click="toTab('members')">项目成员选项卡</a>中配置。指导教师一栏的第一项
                        即是负责项目审核的指导老师，参与者一栏的第一项即是项目的负责人。
                    </p>
                    <p class="fill-introduce">
                        3、每个选项卡填写完成后，点击“保存”按钮即可保存数据。直接点击上方按钮切换选项卡时，也可以保存项目。
                    </p>
                    <p class="fill-introduce">
                        4、全部填写完毕后，在<a href="javascript: void(0)" @click="toTab('final-check')">检查并提交选项卡</a>中复查一次。全部检查完成后，拉到此选项卡
                        页面的最下方，点击“提交”按钮即可提交项目。<strong>项目提交后，{{ data.basicInfo.Status === 0 ? '指导老师老师' : "院级管理员" }}审核前</strong>可以重新修改并提交。
                    </p>
                </div>
            </div>
        </a-tab-pane>
        <a-tab-pane key="members" tab="项目成员" class="page-pane nopadding">
            <div class="paper-container app-intro">
                <div class="page-div narrow w1k">
                    <member-editor />
                </div>
            </div>
        </a-tab-pane>
        <a-tab-pane key="basic-info" tab="基本信息" class="page-pane nopadding" >
            <div class="paper-container">
                <div class="page-div narrow w1k">
                    <basic-info-editor />
                </div>
            </div>
        </a-tab-pane>
        <a-tab-pane key="basis" tab="项目简介和立项依据" class="page-pane nopadding" >
            <div class="paper-container">
                <div class="page-div narrow w1k">
                    <text-editor />
                </div>
            </div>
        </a-tab-pane>
        <a-tab-pane key="badgets" tab="经费预算" class="page-pane nopadding" >
            <div class="paper-container app-budget">
                <div class="page-div narrow w1k">
                    <budget-editor />
                </div>
            </div>
        </a-tab-pane>
        <a-tab-pane key="final-check" tab="检查并提交" class="page-pane" >经费预算</a-tab-pane>
    </a-tabs>
</template>

<script setup>
import app from '@/app'
import { ref, reactive, watchEffect, provide, inject } from 'vue';
import MemberEditor from './editors/member-editor.vue'
import BudgetEditor from './editors/budget-editor.vue'
import TextEditor from './editors/text-editor.vue'
import BasicInfoEditor from './editors/basic-info-editor.vue'

const props = defineProps({
    title: String
})
const activeKey = ref("basic-info");
const data = inject("data");

if (!data.basicInfo.isNew) {
    activeKey.value = "members";
}

function toTab (key) {
    activeKey.value = key;
}
</script>

<style lang="less">
@import url('../app-form.less');
#innov-editor {
    .page-div.w1k {
        width: 1000px;
    }
}
</style>